import {useMemo,useState,useCallback} from "react";

export default function UseMemoExample(){
    let [count, setCount] = useState(0);
    //useEffect 可以这样用？
    var add = useMemo(()=>{
        console.log("memo")
        return count+1;
    },[count]);

    var onClick = useMemo(()=>{
        console.log("just once");
        return ()=>{
            console.log("button click use memo")
        }
    },[]);

    var onClickCallback = useCallback(()=>{
        console.log("button click use callback");
    },[]);
    console.log("render");

    return (
        <div>
            点击次数：{count}<br/>
            次数加一：{add}<br/>
            <button onClick={()=>setCount(count+1)}>点我</button>
            <button onClick={onClick}>点我 useMemo</button>
            <button onClick={onClickCallback}>点我 usecallback</button>
        </div>
    );
}